<template>
  <h2>响应式数据-reactive</h2>
  a: {{ data.a }} <button @click="data.a++">a+1</button>
  <button @click="add()">a+1</button><br/>
  
  姓名:{{ data.student.name }}<br/>
  年龄:{{ data.student.age }}<br/>
  性别:{{ data.student.sex }}<br/>
</template>

<script setup>
import { reactive } from 'vue'
const data = reactive({
  a: 1,
  student: {
    name: '张三',
    age: 18,
    sex: '男'
  }
})

//js写法
function addjs() {
  data.a++
}

//ts写法
const add = () => {
  data.a++
}
</script>

<style scoped></style>